<template>
  <div class="photolist">
    <!-- mui-fullscreen 全屏的 -->
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item',item.id == 0 ? 'mui-active' : '']"
            v-for="item in navData"
            :key="item.id"
            @tap="getPhotoImg(item.id)"
          >{{item.title}}</a>
        </div>
      </div>
    </div>
    <!-- img内容 -->
    <ul class="photolist">
      <router-link tag="li" v-for="item in newList" :key="item.id" :to="'/home/photoinfo' + item.id">
        <img v-lazy="item.imgUrl">
        <div class="photoinfo">
          <h1>{{ item.title }}</h1>
          <p>{{ item.content }}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
// 导入 mui 的js文件
import mui from "../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {
      navData: [
        { title: "家具生活", id: 1 },
        { title: "摄影设计", id: 2 },
        { title: "明星美女", id: 3 },
        { title: "空间设计", id: 4 },
        { title: "户型装饰", id: 5 }
      ],
      list: [
        [
          {
            id: 1,
            imgUrl:require("../../images/10.jpg"),
            title: "年度词汇有点“毒”",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 2,
            imgUrl:require("../../images/18.jpg"),
            title: "年度词汇有点“毒”",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 3,
            imgUrl:require("../../images/20.jpg"),
            title: "年度词汇有点“毒”",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 4,
             imgUrl:require("../../images/23.jpg"),
            title: "年度词汇有点“毒”",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 5,
             imgUrl:require("../../images/24.jpg"),
            title: "年度词汇有点“毒”",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 6,
            imgUrl:require("../../images/19.jpg"),
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 7,
             imgUrl:require("../../images/18.jpg"),
            title: "年度词汇有点“毒”",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 8,
            imgUrl:require("../../images/21.jpg"),
            title: "年度词汇有点“毒”",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          }
        ],
        [
          {
            id: 9,
            imgUrl:require("../../images/23.jpg"),
            title: "这是家具生活中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 10,
             imgUrl:require("../../images/22.jpg"),
            title: "这是家具生活中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 11,
            imgUrl:require("../../images/10.jpg"),
            title: "这是家具生活中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 12,
            imgUrl:require("../../images/11.jpg"),
            title: "这是家具生活中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 13,
            imgUrl:require("../../images/12.jpg"),
            title: "这是家具生活中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 14,
             imgUrl:require("../../images/13.jpg"),
            title: "这是家具生活中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          }
        ],
        [
          {
            id: 15,
            imgUrl:require("../../images/14.jpg"),
            title: "这是摄影设计中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 16,
              imgUrl:require("../../images/15.jpg"),
            title: "这是摄影设计中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 17,
             imgUrl:require("../../images/16.jpg"),
            title: "这是摄影设计中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 18,
            imgUrl:require("../../images/17.jpg"),
            title: "这是家具生活中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 19,
             imgUrl:require("../../images/18.jpg"),
            title: "这是家具生活中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 20,
            imgUrl:require("../../images/15.jpg"),
            title: "这是家具生活中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          }
        ],
        [
          {
            id: 21,
            imgUrl:require("../../images/19.jpg"),
            title: "这是明星美女中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 22,
            imgUrl:require("../../images/10.jpg"),
            title: "这是明星美女中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 23,
            imgUrl:require("../../images/20.jpg"),
            title: "这是明星美女中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          }
        ],
        [
          {
            id: 24,
             imgUrl:require("../../images/21.jpg"),
            title: "这是空间设计中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 25,
            imgUrl:require("../../images/10.jpg"),
            title: "这是空间设计中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 26,
             imgUrl:require("../../images/22.jpg"),
            title: "这是空间设计中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          }
        ],
        [
          {
            id: 27,
            imgUrl:require("../../images/23.jpg"),
            title: "这是户型装饰中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 28,
             imgUrl:require("../../images/10.jpg"),
            title: "这是户型装饰中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          },
          {
            id: 29,
            imgUrl:require("../../images/24.jpg"),
            title: "这是户型装饰中的图片",
            content:
              "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
          }
        ]
      ],
      newList: []
    };
  },
  created() {
    this.getAllcategory();
    this.getPhotoImg(0);
  },
  methods: {
    getAllcategory() {
      this.navData.unshift({ title: "全部", id: 0 });
    },
    getPhotoImg(itemId) {
      this.newList = this.list[itemId];
    }
  },
  mounted() {
    // 初始化滑动控件   最好在mounted生命周期函数中  这是的DOM元素已经加载完毕
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  }
};
</script>
<style lang="scss" scoped>
* {
  touch-action: pan-y;
}
.photolist {
  list-style: none;
  padding: 0 5px;
  margin: 0;
  li {
    background-color: #ccc;
    list-style: none;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 0 10px #999;
    position: relative;
    img {
      width: 100%;
      border-radius: 5px;
      vertical-align: middle;
    }
    .photoinfo {
      width: 100%;
      max-height: 86px;
      position: absolute;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      padding: 5px;
      h1 {
        text-align: left;
        font-size: 12px;
        color: #fff;
        margin: 3px 0 5px 0;
      }
      p {
        font-size: 12px;
        text-align: left;
        color: #fff;
        margin: 0;
      }
    }
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
  }
}
</style>
